// 导出todolist类
export class ToDoList {
    // 添加数据
    constructor(option) {
        // 挂载容器
        this.el = document.querySelector(option.el);
        // 记录待办事项
        this.data = {
            taskList: []
        }
        // 初始化
        this.render();
        // console.log(this);
        // 测试模板函数
        // this.template([
        //     {
        //         task: '上课',
        //         done: false,
        //         id: 1
        //     },
        //     {
        //         task: '上课111',
        //         done: true,
        //         id: 2
        //     }
        // ])
    }
    // 渲染数据
    render() {
        // 新增输入框模块
        this.createSearch();
        // 新增列表模块
        this.createList();
        // 添加交互行为
        this.addEvent();
    }
    // 创建输入框
    createSearch() {
        let header = document.createElement("header");
        header.className = "index-header";
        header.innerHTML = `
            <h3>To Do List</h3>
            <input class="task-inp" type="text" placeholder="请输入待办事项"/>
        `
        // 把标签表现在页面了
        this.el.appendChild(header);
        this.inpEl = document.querySelector(".task-inp");
    }
    // 创建列表
    createList() {
        let section = document.createElement("section");
        section.className = "index-section";
        section.innerHTML = `
           <div class="task-num">
                <div class="left">总【<span class="total-num">0</span>】个</div>
                <div class="right">已完成【<span class="done-num">0</span>】个</div>
           </div>
           <ul class="task-list">
               <!-- 动态渲染 -->
           </ul>
        `
        // 把标签表现在页面了
        this.el.appendChild(section);
        // 获取指定的标签
        this.totalNumEl = document.querySelector(".total-num");
        this.doneNumEl = document.querySelector(".done-num");
        this.taskListEl = document.querySelector(".task-list");
    }
    // 交互行为
    addEvent() {
        // 绑定键盘事件
        this.inpEl.onkeydown = event => {
            // 获取输入框
            let task = this.inpEl.value;
            // 获取按钮的标记
            let { keyCode, code } = event;
            //   console.log({keyCode,code});// 13  Enter
            if (keyCode == 13 || code == "Enter") {
                // console.log({task});
                this.data.taskList.push({
                    task,
                    id: Math.random().toString().slice(2),
                    done: false
                })
                // 渲染数据
                this.template(this.data.taskList);
                // 重置输入框
                this.inpEl.value = "";
                // 总数量
                this.totalNumEl.innerHTML = this.data.taskList.length;
                console.log(this.data.taskList);
            }

        }

        // 绑定点击事件
        this.taskListEl.onclick = event => {
            // 解构赋值
            let {taskList} = this.data;
            // 获取目标元素
            // let {target} = event;
            let curEl = event.target;
            let tagName = curEl.tagName.toLocaleLowerCase();
            let id = curEl.dataset.id;
            // console.log({id});
            // console.log({tagName});
            // 判断用户点击的标签是哪一个
            let arr = [];
            // 是否设置事项已完成
            if(tagName == 'input') {
                if(curEl.checked) {  // 表示已完成
                    // 数组
                   arr = taskList.map((item)=>{
                        if(item.id == id) {
                            item.done = true;
                        }
                        return item;
                    })
                }else {// 表示未完成
                    arr = taskList.map((item)=>{
                        if(item.id == id) {
                            item.done = false;
                        }
                        return item;
                    })
                }
                // console.log(curEl.checked);
                this.data.taskList = arr;
                this.template(this.data.taskList);

                // 统计已完成事项有多少
                let arr2 = this.data.taskList.filter(item=>{
                    return item.done == true;
                })
                // console.log(arr2);
                // 渲染已完成的数量
                this.doneNumEl.innerHTML = arr2.length;
            }

            // 判断是否删除事项
            if(tagName == 'button') {
                if(confirm('是否删除该事项?')) {
                    // 点击确定
                    // 根据 id 删除相关的事项
                    // id==item.id 表示这个是要删除的 
                    // id!=item.id 表示这个是不用删除的 要保留
                    let arr =  this.data.taskList.filter(item=> {
                        return id != item.id;
                    })
                    this.data.taskList = arr;
                    this.template(arr);// 渲染数组的意思

                    // 统计已完成事项有多少
                    let arr2 = this.data.taskList.filter(item=>{
                        return item.done == true;
                    })
                    // console.log(arr2);
                    // 渲染已完成的数量
                    this.doneNumEl.innerHTML = arr2.length;

                    // 统计总数量
                    this.totalNumEl.innerHTML = arr.length;
                }
            }
        }

        // 绑定事件 监听span标签的输入
        this.taskListEl.oninput = event => {
            // console.log(event.target);
            let curEl = event.target;
            let tagName = curEl.tagName.toLocaleLowerCase();
            let id = curEl.dataset.id;
            if(tagName == 'span') {
                let task = curEl.innerText;
                this.data.taskList.forEach(item=> {
                     if(item.id == id) {
                        item.task = task;
                     }
                })
            }
        }
    }
    // 动态渲染数据
    template(arr) {
        let str = '';
        if (arr.length == 0 && !Array.isArray(arr)) return;
        arr.forEach((item, index) => {
            str += `
            <li class="${item.done == true ? 'active' : ''}">
                <div class="l">
                    ${item.done == true ? '<input data-id="'+item.id+'" type="checkbox" checked/>' : '  <input  data-id="'+item.id+'"  type="checkbox"/>'}
                    <span data-id="${item.id}" contenteditable="true">${item.task}</span>
                </div>
                <div class="r">
                    <button data-id="${item.id}">删除</button>
                </div>
            </li>
            `
        })
        // 渲染字符
        this.taskListEl.innerHTML = str;
    }
}